<template>
  <el-main>
    <el-form
      :model="parms"
      ref="seachform"
      label-width="80px"
      :inline="true"
      size="small">
      <el-form-item label="角色名称">
        <el-input v-model="parms.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchList" icon="el-icon-search">查询</el-button>
        <el-button
          @click="cacelList"
          style="color: #ff7670"
          icon="el-icon-delete">
          取消
        </el-button>
        <el-button
          @click="addRole"
          type="primary"
          icon="el-icon-plus"
          v-if="hasPerm('sys:role:add')">
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :height="tableHeight" :data="roleList" border stripe>
      <el-table-column prop="name" label="角色名称"></el-table-column>
      <el-table-column prop="remark" label="角色备注"></el-table-column>
      <el-table-column label="操作" align="center" width="320">
        <template slot-scope="scope">
          <el-button
            v-if="hasPerm('sys:role:edit')"
            icon="el-icon-edit"
            type="primary"
            size="small"
            @click="editRole(scope.row)">
            编辑
          </el-button>
          <el-button
            v-if="hasPerm('sys:role:assign')"
            icon="el-icon-setting"
            type="primary"
            size="small"
            @click="assignRole(scope.row)">
            分配权限
          </el-button>
          <el-button
            v-if="hasPerm('sys:role:delete')"
            icon="el-icon-delete"
            type="danger"
            size="small"
            @click="deleteRole(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :page.sync="parms.currentPage"
      :size.sync="parms.pageSize"
      :total="parms.total"
      :callback="getRoleList"></Pagination>
    <!-- 新增或编辑弹框 -->
    <add-edit-dailog-vue
      ref="addEditRef"
      @onConfirm="onConfirm"></add-edit-dailog-vue>
    <!-- 分配权限弹框 -->
    <assignDialogVue ref="assignRef"></assignDialogVue>
  </el-main>
</template>

<script>
import {
  getRoleListApi,
  addRoleApi,
  editRoleApi,
  deleteRoleApi
} from '@/api/role'
import Pagination from '@/components/Pagination'
import addEditDailogVue from './addEditDailog.vue'
import assignDialogVue from './assignDialog.vue'
// 判断是否是末级
export default {
  components: {
    assignDialogVue,
    Pagination,
    addEditDailogVue
  },
  data() {
    return {
      // 角色id
      roleId: '',
      //表格高度
      tableHeight: 0,
      //角色列表数据
      roleList: [],
      //查询参数
      parms: {
        currentPage: 1, //当前是第几页
        pageSize: 5, //每页查询条数
        userId: this.$store.getters.userId,
        total: 0,
        name: ''
      }
    }
  },
  created() {
    this.getRoleList()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 210
    })
  },
  methods: {
    // 对话框的事件
    //新增或编辑确认事件
    async onConfirm(val) {
      let res = null
      if (val.editType === '0') {
        //新增
        res = await addRoleApi(val)
      } else {
        // 编辑
        res = await editRoleApi(val)
      }
      if (res && res.code === 200) {
        //刷新列表
        this.getRoleList(this.parms)
        this.$message.success(res.msg)
      }
    },
    // 上部表格的事件
    //新增按钮
    addRole() {
      this.$refs.addEditRef.show('0')
    },
    //取消按钮
    cacelList() {
      this.parms.currentPage = 1
      this.parms.name = ''
      this.getRoleList(this.parms)
    },
    //查询按钮
    searchList() {
      this.parms.currentPage = 1
      this.getRoleList(this.parms)
    },
    //分配权限按钮
    // 分配权限需要回显权限数据，目前能拿到的就是树形结构的数据，然后就是所有选中的节点id
    // 问题是回显的是全部的父子节点的id，如果把父节点的checked属性也给设成true,那他下面的
    // 所有子节点就都会被回显，这显然不对，因为很有可能这个父节点他就只是有一个子节点被选中
    // 但是你把它的四个子节点都回显回来，肯定就不对，随意就需要配合setLeaf的方法，先给他一个标识
    // 就是他们的open属性 arr[i].open ，让他的所有非子级的open属性都给成false，这样就拿现有的
    // 所有id进行循环，id符合的，然后看他的open属性，如果是true,那这个才是末级，就是最后的子级
    // 就选他的id就可以了，然后把这个值放进默认回显的响应式数据中就可以
    async assignRole(row) {
      this.$refs.assignRef.show(row)
    },
    //删除按钮
    async deleteRole(row) {
      console.log(row)
      let confrim = await this.$myconfirm('确定删除该数据吗？')
      if (confrim) {
        let parm = {
          id: row.id
        }
        let res = await deleteRoleApi(parm)
        if (res && res.code === 200) {
          //刷新列表
          this.getRoleList(this.parms)
          this.$message.success(res.msg)
        }
      }
    },
    //编辑按钮
    editRole(row) {
      this.$refs.addEditRef.show('1', row)
    },
    // 获取角色列表
    async getRoleList() {
      let res = await getRoleListApi(this.parms)
      if (res && res.code === 200) {
        this.roleList = res.data.records
        this.parms.total = res.data.total
      }
      // console.log('这是角色管理的页面', res)
    }
  }
}
</script>

<style lang="less" scoped></style>
